<script>
import Station from "@/components/common/Station.vue"

export default {
	components: {
		Station
	},
	data() {
		return {
			keyword: '',
			markers: [],
			list: [],
			keyuyue: [],
			bukeyuyue: [],
			devicePark: [],
			rate: [],
			searchParams: {
				is_park: '',  // 搜索车位传1
				is_power: '', // 搜索电桩传1
				power_rate: '', // 搜索电桩功率
				speed: '',   // 快充传'快',慢充传'慢'
				type: ''     // 1物业 2个人 3联营电站 4非联营电站
			}
		}
	},
	onLoad() {
		this.getKeyuyue()
		this.getBukeyuyue()
		this.getDevicePark()
		this.getRate()
		//经纬度 默认用户当前位置
		uni.getLocation({
			type: 'wgs84',
			success: (res) => {
				this.searchParams.lat = res.latitude
				this.searchParams.lng = res.longitude
				this.getList()
			},
			fail: (e) => {
				this.getList()
			}
		})
		
	},
	watch: {
		searchParams: {
			handler(newVal, oldVal) {
				this.getList()
			},
			deep: true
		}
	},
	methods: {
		async getList() {
			let searchParams = {}
			for (let key in this.searchParams) {
				if (this.searchParams[key]) {
					searchParams[key] = this.searchParams[key]
				}
			}
			const res = await this.http("get", "/api/station/lists", searchParams)
			this.list = res.data
		},
		reset() {
			this.searchParams.is_park = ''
			this.searchParams.is_power = ''
			this.searchParams.power_rate = ''
			this.searchParams.speed = ''
			this.searchParams.type = ''
		},
		log(e) {
			console.log(e)
		},
		onMapChange(e) {
			this.searchParams.lat = e.detail.center.latitude
			this.searchParams.lng = e.detail.center.longitude
			this.markers = [{
				latitude: e.detail.center.latitude,
				longitude: e.detail.center.longitude,
				iconPath: '/static/icon/marker.png'
			}]
		},
		async getRate() {
			const res = await this.http("get", "/api/station/rate_select")
			this.rate = res.data
		},
		async getKeyuyue() {
			const res = await this.http("get", "/api/station/can_order", {
				status: 1
			})
			this.keyuyue = res.data
		},
		async getBukeyuyue() {
			const res = await this.http("get", "/api/station/no_can_order", {
				status: 2
			})
			this.bukeyuyue = res.data
		},
		async getDevicePark() {
			const res = await this.http("get", "/api/station/park_device_select")
			this.devicePark = res.data
		},
		goTo(url) {
			uni.navigateTo({
				url: url
			})
		}
	}
}

</script>

<template>
	<view class="flex flex-col h-full" style="align-items: stretch;overflow: hidden;">
		<div class="fixed">
			<div class="between p-30">
				<div class="flex shadow  bg-white h-70 rounded-35 flex-1">
					<image src="/static/icon/search.png" mode="widthFix" class="w-30 flex-shirnk-0 ml-20"></image>
					<input type="text" placeholder="请输入电站名或地区" class="flex-1 ml-20" v-model="keyword">
					<div class="text-orange mr-20 pl-20 fz32" @click="goTo('/pages/index/menu/search?keyword=' + keyword)"
						style="border-left: 1px solid #FF8F1F;">搜索</div>
				</div>
				<div class="flex ml-20">
					<div class="h-70 rounded-35 w-70 shadow center bg-white">
						<image src="/static/icon/help.png" mode="widthFix" class="w-40"></image>
					</div>
					<!-- <div class="h-70 rounded-35 shadow center pl-20 pr-20 ml-20 bg-white">
						<image src="/static/icon/address2.png" mode="widthFix" class="w-35"></image>
						<div class="fz32 text-orange ml-10">重庆</div>
					</div> -->
				</div>
			</div>
			<div class="pl-30 pr-30 bg-white">
				<!-- <div style="word-break: break-all;">
					{{ JSON.stringify(searchParams) }}
				</div> -->
				<div class="shadow p-20 rounded-15">
					<div class="between text-black fz28">
						<picker mode="selector" range-key="label" :range="keyuyue"
							@change="(e) => { searchParams.type = keyuyue[e.detail.value].value }">
							<div class="flex">
								{{ searchParams.type && keyuyue.find(item => item.value == searchParams.type) ?
									keyuyue.find(item => item.value == searchParams.type).label :
									'可预约' }}
								<image src="/static/icon/san.png" mode="widthFix" class="w-25 ml-10 mt-5"></image>
							</div>
						</picker>
						<picker mode="selector" range-key="label" :range="bukeyuyue"
							@change="(e) => { searchParams.type = bukeyuyue[e.detail.value].value }">
							<div class="flex">
								{{ searchParams.type && bukeyuyue.find(item => item.value == searchParams.type) ?
									bukeyuyue.find(item => item.value == searchParams.type).label :
									'不可预约'
								}}
								<image src="/static/icon/san.png" mode="widthFix" class="w-25 ml-10 mt-5"></image>
							</div>
						</picker>
						<picker mode="selector" :range="devicePark" range-key="label" @change="(e) => {
							if (devicePark[e.detail.value].label == '车位') {
								searchParams.is_park = '1'
								searchParams.is_power = ''
							}else if (devicePark[e.detail.value].label == '电桩'){
								searchParams.is_park = ''
								searchParams.is_power = '1'
							}else{
								searchParams.is_park = ''
								searchParams.is_power = ''
							}
						}">
							<div class="flex">
								<text v-if="searchParams.is_park=='1'">车位</text>
								<text v-else-if="searchParams.is_power == '1'">电桩</text>
								<text v-else>车位/电桩</text>
								<image src="/static/icon/san.png" mode="widthFix" class="w-25 ml-10 mt-5"></image>
							</div>
						</picker>
						<picker mode="selector" :range="rate" range-key="value" @change="(e) => {
							searchParams.power_rate = rate[e.detail.value].value
						}">
							<div class="flex">
								{{ searchParams.power_rate || '功率' }}
								<image src="/static/icon/san.png" mode="widthFix" class="w-25 ml-10 mt-5"></image>
							</div>
						</picker>
					</div>
					<div class="between fz28 mt-30">
						<div class="flex">
							<div class="fz28 rounded-30 pt-5 pb-5 pl-20 pr-20 bg-gray-300 text-gray-600"
								:class="{ 'bg-orange text-white': searchParams.speed == '快' }"
								@click="searchParams.speed = '快'">快充</div>
							<div class="fz28 rounded-30 pt-5 pb-5 pl-20 pr-20  bg-gray-300 text-gray-600 ml-30"
								:class="{ 'bg-orange text-white': searchParams.speed == '慢' }"
								@click="searchParams.speed = '慢'">慢充</div>
						</div>
						<div class="bg-orange text-white rounded-30 pt-5 pb-5 pl-20 pr-20" @click="reset">重置</div>
					</div>
				</div>
			</div>
		</div>
		<scroll-view scroll-y="true" class="h-full">
			<div class="p-30">
				<div class="mb-20" v-for="item in list">
					<Station :item="item" />
				</div>				
			</div>
			<div style="height: 300px;"></div>
			
		</scroll-view>

	</view>
</template>


<style>
page {
	height: 100%;
	overflow: hidden;
}
</style>